<template>
	<view>
		<view class="shopImageView">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular autoplay="true">
					<swiper-item v-for="item in imageList">
						<image class="swiperItem" :src="item" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="washShopItem" v-model="washShopInfo">
			<view class="washShopInfo">
				<view class="shoptitle">
					<text style="font-weight: bold;font-size: 32rpx;">{{washShopInfo.name}}</text>
				</view>
				<view class="shopstar">
					<!-- 只读状态,默认false：可以手动选择。true:只读 -->
					<uni-rate :readonly="true" :value="washShopInfo.star" />
					<text style="margin-left: 10rpx;">{{washShopInfo.star}}分</text>
					<text style="margin-left: 40rpx;">销量：{{washShopInfo.sales}}</text>
				</view>
				<view class="opentime">
					<text>营业时间: {{washShopInfo.opentime}}</text>
				</view>
				<view class="shopaddress">
					<text>{{washShopInfo.address}}</text>
					<image style="width: 40rpx; height: 40rpx; margin-left: 20rpx;margin-bottom: -10rpx"
						src="../../../static/ditu.png"></image>
				</view>
			</view>
		</view>
		<view class="washServiceView">
			<text style="font-weight: bold;font-size: 32rpx;">服务</text>
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in serviceList" :key="item.value"
						style="display: flex; ">
						<view>
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
						<view style="margin-left: 10rpx; width: 300rpx;">{{item.name}}</view>
						<view style="margin-left: 100rpx;">
							￥{{item.price}}
						</view>
					</label>
				</checkbox-group>
			</view>
			<!-- 服务内容介绍 -->
			<view class="washServiceIntro">
				heckbox的默认颜色，在不同平台不一样。微信小程序、360小程序是绿色的，抖音小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
				如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"
			</view>
		</view>

		<text style="font-weight: bold;font-size: 32rpx;margin-left: 20rpx;margin-right: 20rpx;">服务评价</text>
		<!-- 服务评价 -->
		<view class="ServiceEvaluationView">

			<view class="ServiceEvaluationItem" v-for="item in serviceEvaluationList">
				<view class="ServiceEvaluationTop">
					<view class="topImage">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="topInfo">
						<view style="display: flex; font-size: 30rpx;margin-bottom: 20rpx;">
							<view>
								{{item.name}}
							</view>
							<view style="margin-left: 300rpx;">
								{{item.time}}
							</view>
						</view>
						<uni-rate :readonly="true" :value="item.star" />
					</view>
				</view>
				<view class="ServiceEvaluationContent">
					<view class="ServiceEvaluationInfo">
						{{item.info}}
					</view>
					<view class="ServiceEvaluationImages" style="display: flex; flex-wrap: wrap;">
						<view class="ServiceEvaluationImageItem" v-for="item2 in item.infoImages"
							style="margin-right: 10rpx;">
							<image :src="item2"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮部分 -->
		<view class="washServiceButtomView">
			<view class="CustomerServiceView">
				<button type="warn" @click="GetCustomerService">购物车（0）</button>
			</view>
			<view class="buyWashServiceView">
				<button type="warn" style="background-color: burlywood">确认已选服务</button>
			</view>
		</view>
		<!-- 弹出层部分 -->
		<view class="bottomView">
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" :mask-click="false">
					<text style="margin-left: 10rpx;">服务订单</text>
					<text style="float: right; margin-right: 10rpx;" @click="close()">×</text>
					<view class="popup-content" style="text-align: center; margin-top: 30rpx; margin-bottom: 30rpx;">
						<!-- <view style="font-size: 40rpx;">13592667163</view> -->
						<!-- 复选框订单部分 -->
						<view class="uni-list"
							style="padding-top: 10rpx; margin-left: 10rpx;border-top: 1px solid gainsboro;">
							<checkbox-group @change="checkboxChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="item in serviceList"
									:key="item.value" style="display: flex; ">
									<view>
										<checkbox :value="item.value" :checked="item.checked" />
									</view>
									<view style="margin-left: 10rpx; width: 300rpx;">{{item.name}}</view>
									<view style="margin-left: 100rpx;">
										￥{{item.price}}
									</view>
								</label>
							</checkbox-group>
						</view>
					</view>
					<view style="display: flex; padding-bottom: 20rpx;">
						<button type="warn" style="width: 200rpx;font-size: 20rpx;">合计:597</button>
						<button type="warn"
							style="width: 200rpx;background-color: burlywood;font-size: 20rpx;">确认已选服务</button>
					</view>

				</uni-popup>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [
					"https://bpic.588ku.com/back_origin_min_pic/20/11/06/839a5f34057f0a103a3acbdc5b0c5afb.jpg",
					"https://bpic.588ku.com/back_list_pic/20/08/04/13aca8a89f4fe0ba4603491954cecbcc.jpg",
					"https://ts1.cn.mm.bing.net/th/id/R-C.d380c27dc7d92ba13fa4d32d78acf787?rik=%2FEbpoccY2COpGg&riu=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20210218ac%2F600%2Fw1920h1080%2F20210218%2Fa951-kkciesr2099282.jpg&ehk=v%2BLKVQQwCHgfmzuO86exl81jqbQmsDw9YcBcoGCuDqA%3D&risl=&pid=ImgRaw&r=0",
				],
				washShopInfo: {
					id: 1,
					name: "伟业汽车保养厂（人民路店）",
					distance: 44,
					star: 3,
					sales: 322,
					opentime: "周一至周五 09:00-22:00",
					address: "山阳区人民中路32号"
				},
				serviceList: [{
						value: '精洗',
						name: '精洗',
						price: 199
					},
					{
						value: '自动洗',
						name: '自动洗',
						price: 28
					},
					{
						value: '至尊精洗',
						name: '至尊精洗',
						price: 399
					}
				],
				serviceEvaluationList: [{
						name: "李先生",
						image: "https://upload-bbs.miyoushe.com/upload/2021/04/17/73281682/f810fbc2e4806aab8176e96feee0078e_8325922548792785196.jpg",
						star: 1,
						time: "2022-10-11",
						info: "2024年度的《胡润百富榜》已正式发布，引发广泛关注。本年度，张一鸣以3500亿元人民币的身家荣登中国首富宝座，娃哈哈的宗馥莉则以810亿元财富成为新任女首富。",
						infoImages: [
							"https://bpic.588ku.com/back_origin_min_pic/20/11/06/839a5f34057f0a103a3acbdc5b0c5afb.jpg",
							"https://bpic.588ku.com/back_list_pic/20/08/04/13aca8a89f4fe0ba4603491954cecbcc.jpg",
							"https://ts1.cn.mm.bing.net/th/id/R-C.d380c27dc7d92ba13fa4d32d78acf787?rik=%2FEbpoccY2COpGg&riu=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20210218ac%2F600%2Fw1920h1080%2F20210218%2Fa951-kkciesr2099282.jpg&ehk=v%2BLKVQQwCHgfmzuO86exl81jqbQmsDw9YcBcoGCuDqA%3D&risl=&pid=ImgRaw&r=0",
							"https://bpic.588ku.com/back_origin_min_pic/20/11/06/839a5f34057f0a103a3acbdc5b0c5afb.jpg",
						]
					},
					{
						name: "李先生",
						image: "https://upload-bbs.miyoushe.com/upload/2021/04/17/73281682/f810fbc2e4806aab8176e96feee0078e_8325922548792785196.jpg",
						star: 2,
						time: "2022-10-11",
						info: "2024年度的《胡润百富榜》已正式发布，引发广泛关注。本年度，张一鸣以3500亿元人民币的身家荣登中国首富宝座，娃哈哈的宗馥莉则以810亿元财富成为新任女首富。",
						infoImages: [
							"https://bpic.588ku.com/back_origin_min_pic/20/11/06/839a5f34057f0a103a3acbdc5b0c5afb.jpg",
							"https://bpic.588ku.com/back_list_pic/20/08/04/13aca8a89f4fe0ba4603491954cecbcc.jpg",
							"https://ts1.cn.mm.bing.net/th/id/R-C.d380c27dc7d92ba13fa4d32d78acf787?rik=%2FEbpoccY2COpGg&riu=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20210218ac%2F600%2Fw1920h1080%2F20210218%2Fa951-kkciesr2099282.jpg&ehk=v%2BLKVQQwCHgfmzuO86exl81jqbQmsDw9YcBcoGCuDqA%3D&risl=&pid=ImgRaw&r=0",
						]
					},
					{
						name: "李先生",
						image: "https://upload-bbs.miyoushe.com/upload/2021/04/17/73281682/f810fbc2e4806aab8176e96feee0078e_8325922548792785196.jpg",
						star: 3,
						time: "2022-10-11",
						info: "2024年度的《胡润百富榜》已正式发布，引发广泛关注。本年度，张一鸣以3500亿元人民币的身家荣登中国首富宝座，娃哈哈的宗馥莉则以810亿元财富成为新任女首富。",
						infoImages: [
							"https://bpic.588ku.com/back_origin_min_pic/20/11/06/839a5f34057f0a103a3acbdc5b0c5afb.jpg",
							"https://bpic.588ku.com/back_list_pic/20/08/04/13aca8a89f4fe0ba4603491954cecbcc.jpg",
							"https://ts1.cn.mm.bing.net/th/id/R-C.d380c27dc7d92ba13fa4d32d78acf787?rik=%2FEbpoccY2COpGg&riu=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20210218ac%2F600%2Fw1920h1080%2F20210218%2Fa951-kkciesr2099282.jpg&ehk=v%2BLKVQQwCHgfmzuO86exl81jqbQmsDw9YcBcoGCuDqA%3D&risl=&pid=ImgRaw&r=0",
						]
					},
				]
			}
		},
		onLoad(options) {
			console.log(options);
		},
		methods: {
			// 勾选框改变方法
			checkboxChange: function(e) {
				console.log(e);
			},
			// 底部弹出框弹出方法
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			// 底部弹出框关闭方法
			close() {
				this.$refs.popup.close()
			},
			GetCustomerService() {
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style scoped>
	.swiper {
		width: 100%;
		height: 400rpx;
	}

	.uni-margin-wrap {
		height: 400rpx;
	}

	.swiperItem {
		width: 100%;
		height: 400rpx;

	}

	.washShopItem {
		margin-top: 20rpx;
		border-bottom: 1rpx #3ecfff solid;
		padding-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.washServiceView {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.uni-list {
		margin-top: 20rpx;
	}

	.washServiceIntro {
		margin-bottom: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		/* 这里设置为2行，可根据需要修改 */
		-webkit-box-orient: vertical;
	}

	.ServiceEvaluationTop {
		display: flex;
	}

	.topImage image {
		width: 120rpx;
		height: 120rpx;
	}

	.ServiceEvaluationView {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 140rpx;
	}

	.topInfo {
		margin-left: 20rpx;
	}

	.ServiceEvaluationInfo {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		/* 这里设置为2行，可根据需要修改 */
		-webkit-box-orient: vertical;
	}

	.ServiceEvaluationImages {
		margin-top: 20rpx;
	}

	.ServiceEvaluationImageItem image {
		width: 300rpx;
		height: 200rpx;
	}

	.ServiceEvaluationItem {
		margin-top: 20rpx;
	}

	/* .CustomerServiceView image {
		margin-top: 20rpx;
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
	} */
	/* 按钮确认已选服务 */
	.buyWashServiceView {
		margin-top: 20rpx;
		margin-left: 150rpx;
	}

	/* .CustomerServiceView {
		width: 120rpx;
		height: 100rpx;
		
	} */
	/* 购物车按钮 */
	.CustomerServiceView {
		margin-top: 20rpx;
		margin-left: 35rpx;
	}

	.washServiceButtomView {
		display: flex;
		width: 100%;
		height: 120rpx;
		/* 		border-radius: 50%;
				background-color: red; */
		background-color: #efeff5;
		text-align: center;
		/* margin: auto; */
		position: fixed;
		bottom: 0rpx;
		/* 距离顶部 50 像素，可根据需要调整 */
		left: 0rpx;
		/* 距离左边 100 像素，可根据需要调整 */
	}
</style>